<template>
  <div class="right3">
    <el-badge value="" class="el-badge-item">
      <span @click="showStatistics()" class="show" v-if="!isShowStatistics && currentCode.length < 6">查看统计</span>
    </el-badge>
    <el-table
      v-if="isShowStatistics=== false"
      :data="newTableData"
      ref="tableRef"
      style="width: 100%"
      :max-height="tableH"
    >
      <el-table-column
        v-for="column in dynamicColumns"
        :key="column.prop"
        :fixed="column.fixed"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :align="column.align"
        :sortable="column.sortable"
        :sort-method="column.sortMethod"
      >
        <template v-if="column.prop === 'xzq'" #default="{ row, column }">
          <span
            class="content-color"
            @click="handlePopulationClick(row, column)"
            >{{ row.xzq }}</span
          >
        </template>
        <template v-if="column.prop === 'town'" #default="{ row, column }">
          <span
            class="content-color"
            @click="handlePopulationClick(row, column)"
            >{{ row.town }}</span
          >
        </template>
        <template v-if="column.prop === 'village'" #default="{ row, column }">
          <span
            class="content-color-no-line"
            @click="handlePopulationClick(row, column)"
            >{{ row.village }}</span
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="container" v-if="isShowStatistics == true" >
        <div class="charts-container">
          <div class="content1 animate__animated animate__fadeInUp">
            <Piecharts :key="currentIndex" :data="selfCheckRate"></Piecharts>
            <span :class="type===1?'bottom-word-class checked-color':'bottom-word-class'"  @click="getStatisticalData(1,{},false)">自查达标率</span>
          </div>
          <div class="content1 animate__animated animate__fadeInUp">
            <Piecharts :key="currentIndex" :data="villageCheckRate"></Piecharts>
            <span :class="type===2?'bottom-word-class checked-color':'bottom-word-class'"  @click="getStatisticalData(2,{},false)" >检查达标率</span>
          </div>
          <div class="content1 animate__animated animate__fadeInUp">
            <Piecharts :key="currentIndex" :data="streetCheckRate"></Piecharts>
            <span :class="type===3?'bottom-word-class2 checked-color':'bottom-word-class2'"  @click="getStatisticalData(3,{},false)">乡镇核查达标率</span>
          </div>
          <div class="content1 animate__animated animate__fadeInUp">
            <Piecharts :key="currentIndex" :data="districtCheckRate"></Piecharts>
            <span :class="type===4?'bottom-word-class2 checked-color':'bottom-word-class2'"   @click="getStatisticalData(4,{},false)">区域核查达标率</span>
          </div>
          <div class="content1 animate__animated animate__fadeInUp">
            <Piecharts :key="currentIndex" :data="cityCheckRate"></Piecharts>
             <span :class="type===5?'bottom-word-class2 checked-color':'bottom-word-class2'" @click="getStatisticalData(5,{},false)">市级核查达标率</span>
          </div>
        </div>
        <div class="content-container">
          <el-card style="">
            <template #header>
              <div class="card-header">
                <span class="card-span" style="float:right">房屋总数：{{inspectionText.zcount}}栋，已达标房屋栋数：{{inspectionText.ydb}}栋，未达标房屋栋数：{{inspectionText.wdb}}栋，达标率：{{inspectionText.dbl}}%</span>

              </div>
            </template>
          </el-card>
            <!-- <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p> -->
            <el-table
              :data="statisticTableData"
              ref="tableRef"
              style="width: 100%"
              :max-height="isShowStatistics?`${tableH_}`:tableH"
              v-show="!isFw"
            >
              <el-table-column
                v-for="column in dynamicColumns_"
                :key="column.prop"
                :fixed="column.fixed"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                :align="column.align"
                :sortable="column.sortable"
                :sort-method="column.sortMethod"
              >
                <template v-if="column.prop === 'xzq'  " #default="{ row, column }">
                  <span
                    class="content-color"
                    @click="handlePopulationClick_(row, column,type)"
                    >{{ row.xzq }}</span
                  >
                </template>
                <template v-if="column.prop === 'town'  " #default="{ row, column }">
                  <span
                    class="content-color-no-line"
                    @click="handlePopulationClick_(row, column,type)"
                    >{{ row.town }}</span
                  >
                </template>

                <template v-if="column.prop === 'village' " #default="{ row, column }">
                  <span  v-if="row.town"
                    class="content-color"
                    @click="handlePopulationClickFw_(row)"
                    >{{ row.village }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div v-if="isFw">
      <el-tabs type="border-card" @tab-change="changeTab">
        <el-tab-pane label="已达标" >
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="房屋编号">
                <el-input v-model="formInline.fwbh" placeholder="" clearable />
              </el-form-item>
              <el-form-item label="户主姓名">
                <el-input v-model="formInline.hzxm" placeholder="" clearable />
              </el-form-item>
              <el-form-item label="房屋地址">
                <el-input v-model="formInline.address" placeholder="" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
            <el-table
              :data="fwResData"
              ref="tableRef"
              style="width: 100%"
              :max-height="tableHT_"
            >
              <el-table-column
                v-for="column in dynamicFwColumns_"
                :key="column.prop"
                :fixed="column.fixed"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                :align="column.align"
                :sortable="column.sortable"
                :sort-method="column.sortMethod"
              >
              </el-table-column>
            </el-table>
              <el-pagination class="el-page-class"
                    v-model:current-page="pageindex"
                    :page-size="Limit"
                    :size="Limit"
                    layout="total, prev, pager, next"
                    :total="total"
                    @current-change="handleCurrentChange"
                  />
        </el-tab-pane>
        <el-tab-pane label="未达标" >
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="房屋编号">
                <el-input v-model="formInline.fwbh" placeholder="" clearable />
              </el-form-item>
              <el-form-item label="户主姓名">
                <el-input v-model="formInline.hzxm" placeholder="" clearable />
              </el-form-item>
              <el-form-item label="房屋地址">
                <el-input v-model="formInline.address" placeholder="" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
            <el-table
              :data="fwResData_"
              ref="tableRef"
              style="width: 100%"
              :max-height="tableHT_"
            >
              <el-table-column
                v-for="column in dynamicFwColumns_"
                :key="column.prop"
                :fixed="column.fixed"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                :align="column.align"
                :sortable="column.sortable"
                :sort-method="column.sortMethod"
              >
              </el-table-column>
            </el-table>
              <el-pagination class="el-page-class"
                    v-model:current-page="pageindex_"
                    :page-size="Limit"
                    :size="Limit"
                    layout="total, prev, pager, next"
                    :total="total_"
                    @current-change="handleCurrentChange"
                  />
        </el-tab-pane>
      </el-tabs>
              <!-- 搜索框 -->

            </div>
        </div>
    </div>
  </div>
</template>
<script>
// const sortByPercentage = (prop) => {
//   // 通过闭包传递列属性
//   return (a, b) => {
//     const numA = parseFloat(a[prop])
//     const numB = parseFloat(b[prop])
//     return numA - numB
//   }
// }
</script>
<script setup>
import { onMounted, ref, computed, watch, reactive } from 'vue'
import { getFglData2, getRysstdData } from '@/api/indexNew.js'
import Piecharts from '@/Pages/bigScreen/components/charts/Piecharts.vue'
import { getZcRysstd,getCjRysstd,getJzRysstd,getQjRysstd,getSjRysstd } from '@/api/indexNew.js'
import { getZcBblbar,getCjBblbar,getJzBblbar,getQjBblbar,getSjBblbar } from '@/api/indexNew.js'
import { zcSearchcjDbfwData,cjSearchcjDbfwData,jzSearchcjDbfwData,qjSearchcjDbfwData,sjSearchcjDbfwData } from '@/api/indexNew.js'


const emits = defineEmits(['updateCurrentQu'])
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  Params: {
    type: Object,
    default: () => {},
  },
  isMapClick: {
    type: Boolean,
    default: false,
  },
})
const tableColumns = ref([
  {
    prop: 'index',
    label: '序号',
    width: '80',
    align: 'center',
  },
  {
    prop: 'xzq',
    label: '区',
    align: 'center',
  },
  {
    prop: 'zcount',
    label: '房屋总数(栋)',
    align: 'center',
  },
  {
    prop: 'zzsggz',
    label: '正在施工改造(栋)',
    width: '160',
    align: 'center',
  },
  {
    prop: 'zzzdfa',
    label: '正在制定方案(栋)',
    width: '160',
    align: 'center',
  },
  {
    prop: 'jzswhntjzssslt',
    label: '建筑室外或内天井增设疏散楼梯(栋)',
    width: '220',
    align: 'center',
  },
  {
    prop: 'jzsnzssslt',
    label: '建筑室内增设疏散楼梯(栋)',
    width: '160',
    align: 'center',
  },
  {
    prop: 'lyxlhxjjzss',
    label: '利用相邻或相近建筑疏散(栋)',
    width: '180',
    align: 'center',
  },
  {
    prop: 'wdb',
    label: '未达标数量(栋)',
    width: '160',
    align: 'center',
  },
  {
    prop: 'ydb',
    label: '已达标数量(栋)',
    width: '160',
    align: 'center',
  },
  {
    prop: 'dbl',
    label: '达标率',
    align: 'center',
    sortable: true,
    // sortMethod: sortByPercentage('zcl'), // 应用排序方法
  },
])
watch(
  () => props.isMapClick,
  (newValue, oldValue) => {
    // console.log('@newValue===监听', newValue)
    if (newValue) {
      tableColumns.value[1] = {
        prop: 'town',
        label: '乡镇',
        align: 'center',
      }
    }
  },
  { deep: true,immediate: true }
)
const newTableData = ref(props.tableData)
// const tableData = ref([
//   {
//     index:1,
//     xzq: '2016-05-01',
//     zcount: 'Tom',
//     ydb: 'California',
//     dbl: '29%',
//   },
//   {
//     index:2,
//     xzq: '2016-05-01',
//     zcount: 'Tom',
//     ydb: 'California',
//     dbl: '21%',
//   },
//   // other data
// ])
const dynamicColumns = computed(() => {
  // 动态生成列，并为需要排序的列定义排序方法
  return tableColumns.value.map((column) => {
    if (column.sortable) {
      return {
        ...column,
        sortMethod: sortByPercentage('dbl'), // 应用排序方法
      }
    } else {
      return { ...column }
    }
  })
})


const tableH = ref('0px')
const tableRef = ref(null)

const getTableH = () => {
  setTimeout(() => {

    tableH.value = document.querySelector('.right3').offsetHeight
    //console.log(tableH.value,'hihiih00000')
    return `${tableH.value}px`

  }, 200)
}
const sortByPercentage = (prop) => {
  // 通过闭包传递列属性
  return (a, b) => {
    const numA = parseFloat(a[prop])
    const numB = parseFloat(b[prop])
    return numA - numB
  }
}
const currentCode = ref('')
const allTitle = ref([])
const oneCode = ref('')
const twoCode = ref('')
const handlePopulationClick = (row, column) => {
  // 在这里编写处理“居住人口数量”列点击事件的逻辑
  if (!row.village) {
    console.log('Row:', row)
    // console.log('column:', column)
    currentCode.value = row.towndm ? row.towndm : row.xzqdm
    props.Params.code = currentCode.value
    let name = ''
    if (currentCode.value.length === 6) {
      oneCode.value = row.xzqdm
      name = row.xzq
    } else {
      twoCode.value = row.towndm
      name = row.town
    }
    if(props.isMapClick){
      oneCode.value = row.xzqdm
    }
    console.log('@currentCode.value', currentCode.value)
    allTitle.value.push(name)
    getXzList()
  }
}
// 下钻到乡镇
const getXzList = async () => {
  let res = await getRysstdData(props.Params)
  let list = res.data.data
  let modifiedList = list.map((item, index) => {
    item.index = index + 1
    item.yhcount = Number(item.yhcount)
    item.zccount = Number(item.zccount)
    // item.zcl = Number(item.zcl)
    item.zcount = Number(item.zcount)
    item.zgcount = Number(item.zgcount)
    return item
  })
  if (modifiedList) {
    if (currentCode.value.length === 6) {
      tableColumns.value[1] = {
        prop: 'town',
        label: '乡镇',
        align: 'center',
      }
    } else if (currentCode.value.length === 12) {
      tableColumns.value[1] = {
        prop: 'village',
        label: '街乡镇',
        align: 'center',
      }
    } else if (currentCode.value.length === 0) {
      tableColumns.value[1] = {
        prop: 'xzq',
        label: '区',
        align: 'center',
      }
    }
  }
  newTableData.value = modifiedList
  if (newTableData.value.length > 0) {
    emitCurrentQu()
  }
}
const emitCurrentQu = () => {
  // 发送自定义事件通知父组件
  emits('updateCurrentQu', allTitle.value, currentCode.value)
}
const backFn = () => {
  //console.log(isShowStatistics.value,'hi9999999999999999')
  if(isShowStatistics.value === false){
    if (currentCode.value.length === 12) {
      props.Params.code = oneCode.value
      currentCode.value = oneCode.value
      allTitle.value.pop()
      getXzList()
    } else if (currentCode.value.length === 6) {
      props.Params.code = ''
      currentCode.value = ''
      allTitle.value = []
      getXzList()
    }
  }else{

    props.Params.code = oneCode.value
    let code_ = currentCode.value
    currentCode.value = oneCode.value
    allTitle.value.pop()
      //getXzList()
    if(code_.length === 7 || code_.value === ''){
      isShowStatistics.value = false
      currentCode.value = ''
    }
   if(isFw.value === true){
      isFw.value = false
      fwResData.value = []
      fwResData_.value = []
      formInline.fwbh = ''
      formInline.hzxm = ''
      formInline.address = ''
      isdb_.value = 1
      pageindex_.value = 1
      pageindex.value = 1
      total.value = 0
      total_.value = 0
   }
    let params_ = {}
    console.log(currentCode.value,'hihihihhihihihi')
    if(currentCode.value.length !== 7){
      params_.code = currentCode.value

    }
    pageindex.value = 1
    pageindex_.value = 1
    total.value = 0
    total_.value = 0
    getStatisticalData(type.value,params_)
  }
}
//echart 图表统计
let isShowStatistics =  ref(false)
const currentIndex = ref(1)
const statisticTableData = ref([])
const formInline = reactive({
  fwbh:'',//房屋编号
  hzxm:'',//房屋姓名
  address:''//地址
})

const tableColumns_ = ref([
  {
    prop: 'index',
    label: '序号',
    width: '80',
    align: 'center',
  },
  {
    prop: 'xzq',
    label: '区',
    align: 'center',
  },
  {
    prop: 'zcount',
    label: '房屋总数',
    align: 'center',
  },
  {
    prop: 'ydb',
    label: '已达标栋数',
    width: '160',
    align: 'center',
  },
  {
    prop: 'wdb',
    label: '未达标栋数',
    width: '160',
    align: 'center',
  },
  {
    prop: 'dbl',
    label: '达标率',
    width: '160',
    align: 'center',
  }
])
const dynamicColumns_ = computed(() => {
  // 动态生成列，并为需要排序的列定义排序方法
  return tableColumns_.value.map((column) => {
    if (column.sortable) {
      return {
        ...column,
        sortMethod: sortByPercentage('dbl'), // 应用排序方法
      }
    } else {
      return { ...column }
    }
  })
})
let tableH_ = ref('0px')
let tableHT_ = ref('0px')
const showStatistics = async () => {
  isShowStatistics.value = true
  currentCode.value = '6666666'
  oneCode.value = ''
  let h_ = tableH.value
  tableH_.value =h_ -  (274/590)*h_;
  tableHT_.value = h_ - (274/590)*h_ -(86/590)*h_ -(45/590)*h_
  let params = {}
    await getZcRysstdData(params)
  getCjRysstdData(params)
  getJzRysstdData(params)
  getQjRysstdData(params)
  getSjRysstdData(params)
  getZcBblbarData(params)
  type.value = 1
  let text_ = selfInspectionText.value
  inspectionText.value = text_
  allTitle.value.push('查看统计')
  //
  emitCurrentQu()
}

const  selfInspectionText = ref({zcount:'',wdb:'',ydb:'',dbl:''})
const  villageInspectionText = ref({zcount:'',wdb:'',ydb:'',dbl:''})
const  streetInspectionText = ref({zcount:'',wdb:'',ydb:'',dbl:''})
const  districtVerificationText = ref({zcount:'',wdb:'',ydb:'',dbl:''})
const  municipalVerificationText = ref({zcount:'',wdb:'',ydb:'',dbl:''})
const inspectionText =  ref({zcount:'',wdb:'',ydb:'',dbl:''})
//
const selfCheckRate = ref([{value:'50',name:'已达标'},{value:'50',name:'未达标'}])
const villageCheckRate = ref([{value:'50',name:'已达标'},{value:'50',name:'未达标'}])
const streetCheckRate  = ref([{value:'50',name:'已达标'},{value:'50',name:'未达标'}])
const districtCheckRate = ref([{value:'50',name:'已达标'},{value:'50',name:'未达标'}])
const cityCheckRate = ref([{value:'50',name:'已达标'},{value:'50',name:'未达标'}])
let type = ref(1)
//
const getZcRysstdData= async (parmas) => {
  let zcRes = await getZcRysstd(parmas)
  selfInspectionText.value = zcRes && zcRes.data && zcRes.data.data && zcRes.data.data.msg
  selfCheckRate.value = zcRes && zcRes.data && zcRes.data.data && zcRes.data.data.tb

}
const getCjRysstdData= async (parmas) => {
  let cjRes = await getCjRysstd(parmas)
  villageInspectionText.value = cjRes && cjRes.data && cjRes.data.data && cjRes.data.data.msg
  villageCheckRate.value = cjRes && cjRes.data && cjRes.data.data && cjRes.data.data.tb
}
const getJzRysstdData= async (parmas) => {
  let jzRes = await getJzRysstd(parmas)
  streetInspectionText.value = jzRes && jzRes.data && jzRes.data.data && jzRes.data.data.msg
  streetCheckRate.value = jzRes && jzRes.data && jzRes.data.data && jzRes.data.data.tb
}
const getQjRysstdData= async (parmas) => {
  let qjRes = await getQjRysstd(parmas)
  districtVerificationText.value = qjRes && qjRes.data && qjRes.data.data && qjRes.data.data.msg
  districtCheckRate.value = qjRes && qjRes.data && qjRes.data.data && qjRes.data.data.tb
  //console.log(districtCheckRate)
}
const getSjRysstdData= async (parmas) => {
  let sjRes = await getSjRysstd(parmas)
  municipalVerificationText.value = sjRes && sjRes.data && sjRes.data.data && sjRes.data.data.msg
  cityCheckRate.value = sjRes && sjRes.data && sjRes.data.data && sjRes.data.data.tb
}


const getZcBblbarData = async (params) =>{
  let zcRes = await getZcBblbar(params)
  let statisticTableData_ = zcRes && zcRes.data && zcRes.data.data
  statisticTableData_ = getArrayIndex(statisticTableData_)
  statisticTableData.value = statisticTableData_
  //console.log(currentCode.value.length,'hiiiiiiiiiiiiiiii')
  //console.log(statisticTableData_,'hihhihihhhhihihi')

}

const getCjBblbarData = async(params) =>{
  let cjRes = await getCjBblbar(params)
  let statisticTableData_ = cjRes && cjRes.data && cjRes.data.data
  statisticTableData_ = getArrayIndex(statisticTableData_)
  statisticTableData.value = statisticTableData_
}
const getJzBblbarData = async(params) =>{
  let jzRes = await getJzBblbar(params)
  let statisticTableData_ = jzRes && jzRes.data && jzRes.data.data
  statisticTableData_ = getArrayIndex(statisticTableData_)
  statisticTableData.value = statisticTableData_
}
const getQjBblbarData = async(params) =>{
  let qjRes = await getQjBblbar(params)
  let statisticTableData_ = qjRes && qjRes.data && qjRes.data.data
  statisticTableData_ = getArrayIndex(statisticTableData_)
  statisticTableData.value = statisticTableData_
}

const getSjBblbarData = async(params) =>{
  let sjRes = await getSjBblbar(params)
  let statisticTableData_ = sjRes && sjRes.data && sjRes.data.data
  statisticTableData_ = getArrayIndex(statisticTableData_)
  statisticTableData.value = statisticTableData_
}



const getArrayIndex = (data) =>{
  let modifiedList = data.map((item, index) => {
    item.index = index + 1
    if(item.code.length === 6){
      item.xzq = item.name
    }
    //console.log(item.code.length, item.xzq, item.town === undefined )
    if(item.code.length === 12 && item.xzq && item.town === undefined ){
      item.town = item.name
    }
    if(item.code.length === 12 && item.town && item.village === undefined ){
      item.village = item.name
    }
    oneCode.value = item.xzqdm && item.towndm ?item.xzqdm:'6666666'

    return item

  })

  return modifiedList
}






const selectCheckData = async (type_,params={},isSelect=false) => {
  if(isFw.value === true){
    isFw.value = false
    fwResData.value = []
    fwResData_.value = []
    formInline.fwbh = ''
    formInline.hzxm = ''
    formInline.address = ''
    isdb_.value = 1
    pageindex_.value = 1
    pageindex.value = 1
    total.value = 0
    total_.value = 0
  }
  if(type.value === type_ && !isSelect){
    return true;
  }
  console.log(type.value,type_,'hizzzzzzzzzzzzzz')
  if(!isSelect){
    type.value = type_
    currentCode.value = '6666666'
    allTitle.value = []
    // const resData = ['getZcRysstdData','getCjRysstdData','getJzRysstdData','getQjRysstdData','getSjRysstdData']
    // let resData_ = resData[typeT]
    // resData_(params)
  }

  let text_
  switch(type_){
    case 1:
      await getZcBblbarData(params)
      text_ = selfInspectionText.value
      inspectionText.value = text_
      break;
    case 2:
      await getCjBblbarData(params)
      text_ = villageInspectionText.value
      break;
    case 3:
      await getJzBblbarData(params)
      text_ =   streetInspectionText.value
      break;
    case 4:
      await getQjBblbarData(params)
      text_ = districtVerificationText.value
      break;
    case 5:
      await getSjBblbarData(params)
      text_ = municipalVerificationText.value
      break;
  }
  //
  inspectionText.value = text_
}


const getStatisticalData = async(type_,params_,isSelect=true)=>{
  let typeMark = type.value!==type_?type.value:type_
  switch(typeMark){
      case 1:
        await getZcRysstdData(params_)
        //下一级参数如何判断？？？空着
        break;
      case 2:
        await getCjRysstdData(params_)
        break;
      case 3:
        await getJzRysstdData(params_)
        break;
      case 4:
        await getQjRysstdData(params_)
        break;
      case 5:
      await getSjRysstdData(params_)
      break;
    }
    await selectCheckData(type_,params_,isSelect)
    if(!params_.code){
        tableColumns_.value[1] = {
          prop: 'xzq',
          label: '区',
          align: 'center',
        }
    }
    //
    else if (params_.code && params_.code.length === 6) {
        tableColumns_.value[1] = {
          prop: 'town',
          label: '乡镇',
          align: 'center',
        }
    } else if ( params_.code && params_.code.length === 12 ) {
        tableColumns_.value[1] = {
          prop: 'village',
          label: '街乡镇',
          align: 'center',
        }
    }

    if (statisticTableData.value.length > 0) {
      emitCurrentQu()
    }
}
const handlePopulationClick_ = async(row,column,type_) => {
  let params_ = {}
  // if(row.code.length !== 6){
    params_.code = row.code
  // }


  currentCode.value = row.code
  // if(row.town === undefined && row.xzq ){
  //   oneCode.value = '6666666'
  // }
  // if(row.town && row.xzqdm){
  //   oneCode.value = row.xzqdm
  // }
  console.log(oneCode,'hohhihihihhihi')
  allTitle.value.push(row.name)
  getStatisticalData(type_,params_)


}
let isFw = ref(false)
let Limit = ref(10)
let pageindex = ref(1)
let  total = ref(0)
let pageindex_ = ref(1)
let  total_ = ref(0)
let villageCode = ref('')
const fwResData = ref([])
const fwResData_ = ref([])
const handlePopulationClickFw_ = async(row) =>{
  isFw.value = true
  let code = row.code
  villageCode.value = code
  currentCode.value = code

  currentCode.value = row.code
  oneCode.value = row.towndm
  let pageNo
  if(isdb_.value === 1){
   // console.log(pageindex.value,'hihihihihihi')
    pageNo = pageindex.value-1
  }else{
    pageNo = pageindex_.value -1
  }
  let params = {Limit:Limit.value,pageindex:pageNo,code,isdb:isdb_.value}
  await fwData(params,type.value)
  if (fwResData.value.length  > 0 || fwResData_.value.length>0) {
    if(row.name){
      allTitle.value.push(row.name)
    }
    emitCurrentQu()
  }

}

const onSubmit = async() =>{
  //
  let params = {}
  console.log(formInline,'hihihhi')
  params.fwbh = formInline.fwbh
  params.hzxm = formInline.hzxm
  params.address = formInline.address
  console.log('hihihihi',params)
  params.pageindex = isdb_.value === 1?pageindex.value-1:pageindex_.value-1
  params.Limit = Limit.value
  params.code = villageCode.value
  params.isdb = isdb_.value
  console.log('hihihixxxxxxxxxxxhi',params)

  fwDataT(params,type.value)
}

const fwData = async(params,type_) =>{
  let res;
  let params_ = {code:params.code};
  let text_
  switch(type_){
    case 1:
      res = await zcSearchcjDbfwData(params)
      await getZcRysstdData(params_)
      text_ = selfInspectionText.value
      break;
    case 2:
      res = await cjSearchcjDbfwData(params)
      await getCjRysstdData(params_)
      text_ = villageInspectionText.value
      break;
    case 3:
      res = await jzSearchcjDbfwData(params)
      await getJzRysstdData(params_)
      text_ =   streetInspectionText.value
      break;
    case 4:
      res = await qjSearchcjDbfwData(params)
      await getQjRysstdData(params_)
      text_ = districtVerificationText.value
      break;
    case 5:
      res = await sjSearchcjDbfwData(params)
      await getSjRysstdData(params_)
      text_ = municipalVerificationText.value
      break;
  }

  let cjData_ = res && res.data && res.data.data && res.data.data.items
  inspectionText.value = text_
  let modifiedList = cjData_.map((item, index) => {
    item.index = index + 1
    return item
  })

  if(isdb_.value === 1){
    fwResData.value = modifiedList
    console.log(fwResData.value,'hihihihihi44444444444444466666666666hi')
    total.value = res && res.data && res.data.data && res.data.data.total

  }else{
    fwResData_.value = modifiedList
     console.log(fwResData_.value,'hihihihihih44444444444i')
    total_.value = res && res.data && res.data.data && res.data.data.total

  }
  //console.log(fwResData.value,'hihihihihixxxxxxxx')

}


const fwDataT = async(params,type_) =>{
  let res;
  switch(type_){
    case 1:
      res = await zcSearchcjDbfwData(params)
      break;
    case 2:
      res = await cjSearchcjDbfwData(params)
      break;
    case 3:
      res = await jzSearchcjDbfwData(params)
      break;
    case 4:
      res = await qjSearchcjDbfwData(params)
      break;
    case 5:
      res = await sjSearchcjDbfwData(params)
      break;
  }

  let cjData_ = res && res.data && res.data.data && res.data.data.items
  let modifiedList = cjData_.map((item, index) => {
    item.index = index + 1
    return item
  })

  if(isdb_.value === 1){
    fwResData.value = modifiedList
    console.log(fwResData.value,'hihihihihi44444444444444466666666666hi')
    total.value = res && res.data && res.data.data && res.data.data.total

  }else{
    fwResData_.value = modifiedList
     console.log(fwResData_.value,'hihihihihih44444444444i')
    total_.value = res && res.data && res.data.data && res.data.data.total

  }
  //console.log(fwResData.value,'hihihihihixxxxxxxx')

}
//
let isdb_ = ref(1)
const handleCurrentChange = async()=>{
    let type_ = type.value
    let code = villageCode.value
    let isdb = isdb_.value
    let params
    if(isdb_.value == 1){
      params = {Limit:Limit.value,pageindex:pageindex.value-1,code,isdb}
    }else{
      params = {Limit:Limit.value,pageindex:pageindex_.value-1,code,isdb}
    }
  await fwData(params,type_)
}

const tableFwColumns_ =  ref([
  {
    prop: 'index',
    label: '序号',
    width: '80',
    align: 'center',
  },
  {
    prop: 'fwbh',
    label: '房屋编号',
    align: 'center',
    width:  '140'
  },
  {
    prop: 'hzxm',
    label: '户主姓名',
    align: 'center',
    width: '160',
  },
  {
    prop: 'address',
    label: '房屋地址',
    align: 'center',
    overflow: true,
  },
  {
    prop: 'cs',
    label: '层数数量',
    align: 'center',
    width:'80'
  },
  {
    prop: 'jzscxyaqcksl',
    label: '安全出口',
    align: 'center',
    width:'80'
  },
  {
    prop: 'jzxyssltsl',
    label: '疏散楼梯数量',
    align: 'center',
     width:'80'
  },
  {
    prop: 'jsrysstd',
    label: '是否按标准建设通道',
    align: 'center',
  },
])

const dynamicFwColumns_ = computed(() => {
  // 动态生成列，并为需要排序的列定义排序方法
  return tableFwColumns_.value.map((fwColumn) => {
    if (fwColumn.sortable) {
      return {
        ...fwColumn,
        sortMethod: sortByPercentage('dbl'), // 应用排序方法
      }
    } else {
      return { ...fwColumn }
    }
  })
})

const changeTab = async(targetName) =>{
  formInline.fwbh = ''
  formInline.hzxm = ''
  formInline.address = ''
  let mark = targetName=== 0?1:2
  isdb_.value = mark
  console.log(targetName,isdb_.value,'xxxxxxxxxxx')

  let params = {Limit:Limit.value,pageindex:pageindex_.value-1,code:villageCode.value,isdb:isdb_.value}
  await fwDataT(params,type.value)

}

onMounted( () => {
  getTableH()

})

defineExpose({
  backFn,
  currentCode,
})
</script>
<style scoped lang="scss">
.right3 {
  width: 100%;
  height: 100%;
  flex: 1;
  //   border: 1px solid red;
  // 表格部分样式
  // 最外层透明
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
    color: #93dcfe;
    font-size: 2.2rem;
    border-bottom: 1px solid transparent; // 去掉表格体 的 边框
  }
  /* 表格内背景颜色  */
  ::v-deep .el-table {
    th,
    tr,
    td {
      background-color: transparent;
      border: none;
      color: #93dcfe;
      font-size: 2.2rem;
      // height: 5px;
      font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
      font-weight: Normal;
    }
  }
  ::v-deep .el-table__body-wrapper {
    .el-table__body {
      // border: 1px solid red;
      // background-color: red;
      .el-table__row {
        border: 10px solid red;
        // background-color: yellow;
      }
    }
  }
  /* // 设置表格行高度 */
  ::v-deep .el-table__body tr {
    padding: 0;
    height: 54px;
    border: 1px solid red;
  }

  /* // 修改高亮当前行颜色 */
  ::v-deep .el-table tbody tr:hover > td {
    background: #063570 !important;
  }

  /* // 取消当前行高亮 */
  //   ::v-deep .el-table tbody tr {
  //     pointer-events: none;
  //   }

  /* 修改表头样式-加边框 */
  //   ::v-deep .el-table__header-wrapper {
  //      border: solid 1px #04c2ed;
  //   }

  /* // 表格斑马自定义颜色 */
  ::v-deep .el-table__row.warning-row {
    background: #01205a;
  }

  /* 去掉表格里的padding */
  ::v-deep .el-table .cell,
  .el-table th div {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.content-color {
  text-decoration: underline;
  cursor: pointer;
}
.content-color-no-line{
  text-decoration: none;
}
.el-badge-item {
    margin-top: 5px;
    margin-left: 94%;
    color: #93dcfe;
}
.show{
  cursor: pointer;
}

.container{
  .charts-container{
    height: 180px;
    display: flex;
    .content1{
      width:20%;
      height:100%;
      position: relative;
      .bottom-word-class{
        position: absolute;
        left: 40px;
        top: 15rem;
        cursor: pointer;
      }
      span.bottom-word-class2 {
          position: absolute;
          left: 28px;
          top: 15rem;
          cursor: pointer;
      }
      .checked-color{
        color:#EE7171
      }
    }
  }
  .content-container{
    .el-card.is-always-shadow {
      background-color: transparent;
    }
  }

}

::v-deep .el-card {
  color:#fff;
  border: none;

}
::v-deep .el-card__header{
  // --el-card-border-color: #1987B4;
    border-bottom: 1px solid #1987B4;
    border-top: 1px solid #1987B4;
    .card-header{
      height: 1.694vh;
      line-height: 1.694vh;
    }
}
.card-span::after{
  clear: both;
}
::v-deep .el-form-item__label{
  color: #93dcfe;
  font-size: 1.3rem;
}

::v-deep .el-form-item__label{
  color: #93dcfe;
  font-size: 1.3rem;
}
::v-deep .el-input__wrapper,
::v-deep .el-tabs__content,
::v-deep .el-tabs__header.is-top,
::v-deep .el-tabs__item.is-top.is-active,
::v-deep .el-pager>li{
    background-color: transparent;
}
::v-deep .el-tabs--border-card{
 background-color: transparent;
 border:none
}



::v-deep .el-pagination__total,
::v-deep .el-pager,
::v-deep .el-pager>[aria-current=flase]{
  background-color:transparent;
  color:#93dcfe
}
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev,
::v-deep .el-pagination button:disabled{
  background-color:transparent;
  color:#93dcfe
}
::v-deep .el-input__inner,
::v-deep .el-range-input,
::v-deep .el-range-separator,
::v-deep .el-pager>[aria-current=true],
::v-deep .el-input__inner::placeholder,
::v-deep .el-tabs__item.is-top{
  color:white
}

::v-deep .el-tabs__nav.is-top{
    border: 2px solid rgb(16, 152, 243);
    border-radius: 5%;
}
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
 background-color:transparent;
 border-right:1px solid rgb(16, 152, 243);
 color:white
}
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item{
  color:white;
  background-color: rgb(16, 152, 243);
}


</style>
